<template>
  <div class="div">
    <PageTitle title="加盟商退单列表"></PageTitle>
    <el-row>
      <el-col :span="15">
        <dl class="select-bar">
          <dt>筛选:</dt>
          <dd :class="{ current: status == '' }" @click="handleClick('')">全部</dd>
          <dd :class="{ current: status == '3' }" @click="handleClick('3')">审核中</dd>
          <dd :class="{ current: status == '1' }" @click="handleClick('1')">已通过</dd>
          <dd :class="{ current: status == '2' }" @click="handleClick('2')">未通过</dd>
          <dd :class="{ current: status == '4' }" @click="handleClick('4')">已发货</dd>
          <dd :class="{ current: status == '5' }" @click="handleClick('5')">已退货</dd>
        </dl>
      </el-col>
    </el-row>
    <el-table
      stripe
      :data="tableData"
    >
      <el-table-column
        prop="order"
        label="订单号">
      </el-table-column>
      <el-table-column
        prop="title"
        label="商品名称">
      </el-table-column>
      <el-table-column
        prop="name"
        label="规格名称">
      </el-table-column>
      <el-table-column
        prop="type"
        label="商品图片">
        <template slot-scope="scope">
          <img :src="scope.row.url" @click="handlePictureCardPreview(scope.row.url)" class="list-img">
        </template>
      </el-table-column>
      <el-table-column
        prop="pice"
        label="价格">
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
      >
        <template slot-scope="scope">
          <span class="color-info" v-if="scope.row.out_status == 3">审核中</span>
          <span class="color-success" v-if="scope.row.out_status == 1">已通过</span>
          <span class="color-danger" v-if="scope.row.out_status == 2">未通过</span>
          <span class="color-theme" v-if="scope.row.out_status == 4">已发货</span>
          <span class="color-warning" v-if="scope.row.out_status == 5">已退货</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
      <template slot-scope="scope">
        <router-link :to="'/merchantReturnList/merchantReturnDetail/' + scope.row.order + '/' + scope.row.mout_id" class="el-button el-button--text">查看</router-link>
      </template>
      </el-table-column>
    </el-table>
    <div class='pagination-wrapper'>
      <el-pagination
          layout="prev, pager, next"
          @current-change="pageChange"
          :total="totalCount">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl">
    </el-dialog>
  </div>
</template>

<script>
  import PageTitle from '@/components/pageTitle/PageTitle.vue'
  import ListSearchBar from '@/components/listSearchBar/ListSearchBar.vue'
  export default {
    name: 'MerchantReturnList',
    components: {
      PageTitle,
      ListSearchBar
    },
    activated() {
      this._getList()
    },
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        tableData: [],
        status: '',
        pageNum: 1,
        pageSize: 10,
        totalCount: 0
      }
    },
    methods: {
      async _getList() {
        let { data: { code, data } } = await this.$axios({
          url: this.$api + '/v1/platform/outlist',
          method: 'GET',
          params: {
            size: this.pageSize,
            current: this.pageNum,
            out_status: this.status
          }
        })
        if(code === 0) {
          if(data.items) {
            this.tableData = data.items
            this.totalCount = data.page.totalCount
          } else {
            this.tableData = []
          }
        }
      },
      handleClick(s) {
        this.status = s
        this.pageNum = 1
        this.$nextTick(() => {
          this._getList()
        })
      },
      pageChange(pageNum) {
        this.pageNum = pageNum
      },
      handleDateChange() {
        console.log(this.date)
      },
      handlePictureCardPreview(src) {
        this.dialogImageUrl = src;
        this.dialogVisible = true;
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/select-bar.scss';
  .list-img {
     width:80%;
     height:60px;
     cursor: pointer;
  }
  .el-button--text {
    text-decoration: none;
  }
</style>
